<template>
  <view class="selector-view">
    <view class="coupon-list-sub">
      <view class="sub-box">
        <view class="sub-item" :class="{active:curCouponType===0}" @click="changeCouponType(0)">
          可用优惠券
        </view>
        <view class="sub-item" :class="{active:curCouponType===1}" @click="changeCouponType(1)">
          不可用优惠券
        </view>
      </view>
   <!--  <u-subsection activeColor="#38C09E" :list="['可用优惠券', '不可用优惠券']" mode="subsection" :current="curCouponType"
        @change="changeCouponType"></u-subsection> -->
    </view>
    <view class="coupon-list show-y-scroll-bar">
      <view class="coupon-list-box " v-if="curCouponType===0">
        <view class="flex margin padding justify-center" v-if="list.length===0">
          暂无可用优惠券
        </view>
        <view class="coupon-list-item" :class="{'active':item.id===couponId}" v-for="item in list"
          @click="selectCoupon(item)">
          <view class="top">
            <view class="title">
              <view class="">
                {{item.coupon_title||''}}
              </view>
              <view class="right" v-if="item.discount_num">
                {{item.discount_num}}折
              </view>
              <text class="right" v-if="item.discount_amount">
                {{item.discount_amount}}元
              </text>
            </view>
            <view class="type">
              <text>{{item.coupon_type||''}}</text>
              <text v-if="item.use_threshold==='最低消费'&&item.min_consumption">最低消费{{item.min_consumption}}元</text>
              <text v-if="item.use_threshold==='无门槛'">无门槛使用</text>
              <text></text>
            </view>
          </view>
          <view class="bottom">
            <view class="">
              <text v-if="item.available_end_time">有效期至{{item.available_end_time}}</text>
            </view>
            <view class="btn" @click.stop="toCouponDetail(item)">
              详情
            </view>
          </view>
        </view>
      </view>
      <view class="coupon-list-box " v-if="curCouponType===1">
        <view class="flex margin padding justify-center" v-if="list2.length===0">
          暂无不可用优惠券
        </view>
        <view class="coupon-list-item" v-for="item in list2" @click="selectCoupon(item)">
          <view class="top">
            <view class="title">
              <view class="">
                {{item.coupon_title||''}}
              </view>
              <view class="right" v-if="item.discount_num">
                {{item.discount_num}}折
              </view>
              <text class="right" v-if="item.discount_amount">
                {{item.discount_amount}}元
              </text>
            </view>
            <view class="type">
              <text>{{item.coupon_type||''}}</text>
              <text v-if="item.use_threshold==='最低消费'&&item.min_consumption">最低消费{{item.min_consumption}}元</text>
              <text v-if="item.use_threshold==='无门槛'">无门槛使用</text>
              <text></text>
            </view>
          </view>
          <view class="bottom">

            <view class="">
              <text
                v-if="item.available_start_time&&item.available_end_time">{{item.available_start_time}}至{{item.available_end_time}}</text>
              <text v-else> {{item.term_of_validity_str||''}}</text>
            </view>
            <view class="btn" @click.stop="toCouponDetail(item)">
              详情
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="flex align-center justify-center padding margin">
      <button class="button line-white margin-right" @click="cancel()">取消</button>
      <button class="button line-white margin-right" @click="unuse" v-if="list&&list.length>0">不使用</button>
      <button class="button" :class="{'disabled':!couponId}" @click="confirm()" v-if="list&&list.length>0">使用</button>
    </view>

    <view class="custom-center-popup top">
      <u-popup :show="showForm" :round="20" mode="center" :overlay="true" :closeable="true" :closeOnClickOverlay="false"
        @close="showForm=false;onSelectCoupon=true;">
        <view class="popup-title">
          优惠券详情
        </view>
        <bx-form style="padding-top:0;" :disabled="true" serviceName="srvmkt_member_coupon_available_two_select"
          appName="mkt" type="detail" pkCol="id" :pk="couponId" @cancel="showForm = false">
        </bx-form>
      </u-popup>
    </view>
  </view>
</template>

<script>
  export default {
    name: "promotion-selector",
    props: {
      defaultId:{
        type:[String,Number],
      },
      list: {
        type: Array
      },
      list2: {
        type: Array
      }
    },
    data() {
      return {
        couponId: "",
        showForm: false,
        curSelect: "",
        curCouponType: 0,
        formId:""
      };
    },
    created() {
      if(this.defaultId){
        this.couponId = this.defaultId
      }
    },
    methods: {
      confirm() {
        this.$emit('confirm', this.curSelect)
      },
      unuse(){
        this.$emit('unuse')
      },
      cancel(e = '') {
        this.curSelect = ''
        this.$emit('cancel', e)
      },
      selectCoupon(item) {
        if (item._type) {
          uni.showToast({
            title: item._type,
            icon: 'none'
          })
          return
        }
        if (this.couponId === item.id) {
          this.couponId = ''
          this.curSelect = null
        } else {
          this.curSelect = item
          this.couponId = item.id
        }
      },
      changeCouponType(e) {
        console.log(e);
        this.curCouponType = e
      },
      toCouponDetail(e) {
        this.formId = e.id
        this.showForm = true
      },
    },
  }
</script>

<style lang="scss">
  .selector-view {
    width: 50vw;


    .coupon-list-sub {
      width: 30vw;
      margin: 0 auto;
      margin-bottom: 1rem;
      display: flex;
      justify-content: center;
      .sub-box{
        display: flex;
        border: 1px solid #38C09E;
      }
      .sub-item{
        // border: 1px solid #eee;
        padding:1rem 4rem;
        font-size: 2.4rem;
        transition: all .5s;
        cursor: pointer;
        &.active{
          background-color: #38C09E;
          color: #fff;
        }
      }
      ::v-deep .u-subsection {
        height: 6rem;

        .u-subsection__item {
          .u-subsection__item__text {
            font-size: 2.4rem !important;
          }
        }
      }


    }

    .coupon-list {
      font-size: 2.4rem;
      width: 40vw;
      height: 60vh;
      margin: 0 auto;

      &-box {
        width: 100%;
      }

      &-item {
        width: 80%;
        margin-right: 1.5rem;
        border-radius: 1rem;
        border: 1px solid #eee;
        overflow: hidden;
        margin: 0 auto;
        margin-bottom: 1rem;

        &.active {
          border-color: $retail-color-primary;

          .top {
            background-color: #DEF2EA;
          }
        }

        .top {
          padding: 2rem;
          // background-color: #DEF2EA;
          height: 12rem;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .type {
            font-size: 2rem;
            padding: 1rem 0 0;
            display: flex;
            justify-content: space-between;
          }

          .title {
            display: flex;
            font-weight: bold;
            justify-content: space-between;

            .right {
              color: $retail-color-primary;
            }
          }
        }

        .bottom {
          font-size: 2rem;
          color: #A6A6A6;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1rem;

          .btn {
            width: 6rem;
            height: 4rem;
            line-height: 4rem;
            border-radius: 2rem;
            background: #F5F5F5;
            text-align: center;
            font-size: 2rem;
          }
        }
      }
    }
  }
</style>
